<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
#title {
	background-image: url(images/bg-header.jpg);
	background-repeat: repeat;
	height: 50px;
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
}
#menu {
	font-size: 25px;
	line-height: 30px;
	padding-top: 10px;
	padding-left: 5px;
}
#menu a:link, a:visited {
	color: #999999;
	text-decoration: none;
}
#menu a:hover, a:active {
	color: #B9DBDB;
	text-decoration: blink;
}
#left a:link, a:visited {
	color: #999999;
	text-decoration: none;
}
#left a:hover, a:active {
	color: #000000;
}
#container {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFFFFF;
}
#featurebk {
	background-image: url(images/title1.jpg);
	background-repeat: no-repeat;
	height: 200px;
}
#left {
	float: left;
	width: 400px;
}
#right {
	float: left;
	width: 570px;
	margin-left: 10px;
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #999999;
	margin-top: 5px;
}
#clear {
	clear: both;
}
#bottom {
	background-image: url(images/bg-footer2.png);
	background-repeat: no-repeat;
	height: 102px;
}
#copyright {
	color: #505050;
	font-size: 15px;
	line-height: 30px;
	margin-left: 250px;
	margin-bottom: 30px;
	padding-top: 40px;
}
#letftitle {
	font-size: 25px;
	line-height: 30px;
	color: #333333;
	border-bottom-width: 1px;
	border-bottom-style: double;
	border-bottom-color: #999999;
	margin-top: 5px;
	padding-left: 5px;
}
#ldetail {
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: dotted;
	border-bottom-style: dotted;
	border-top-color: #999999;
	border-bottom-color: #999999;
	font-size: 15px;
	line-height: 25px;
	color: #666666;
	padding-left: 5px;
}
#ltable1 {
	font-size: 18px;
	line-height: 28px;
	color: #333333;
}
#lrcomend {
	font-size: 25px;
	line-height: 30px;
	color: #666666;
	margin-top: 5px;
	padding-left: 5px;
}
#lrank {
	font-size: 16px;
	line-height: 25px;
	color: #666666;
}
#lnews {
	font-size: 16px;
	line-height: 30px;
	color: #666666;
}
#wai {
	background-repeat: repeat;
	background-image: url(images/clouds.jpg);
}
#news1title {
	font-size: 25px;
	line-height: 30px;
	color: #333333;
	margin-top: 10px;
	margin-left: 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999999;
}
.STYLE1 {
	font-size: 14px;
	color: #666666;
}
#right #rcon {
	font-size: 14px;
	line-height: 25px;
	margin-left: 10px;
}
#rtitle {
	font-size: 15px;
	line-height: 25px;
	color: #666666;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #333333;
}
.STYLE3 {
	font-size: 24px;
	color: #333333;
}
#comment {
	font-size: 18px;
	line-height: 30px;
	margin-left: 10px;
}
.STYLE5 {
	color: #666666
}
.STYLE6 {color: #333333}
-->
</style>
</head>

<body>
<div id="wai">
  <div id="container">
    <div id="title">
      <div id="menu"><table width="640" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="74"><a href="#">首页</a></td>
    <td width="85"><a href="#" >博文</a></td>
    <td width="119"><a href="#">发博文</a></td>
    <td width="115"><a href="#">留言板</a></td>
    <td width="93"><a href="#"> 关于我</a></td>
    <td width="154">&nbsp;</td>
    </tr>
</table>
    </div>
  </div>
  <div id="featurebk"></div>
   <div id="left">
     <div id="letftitle">关于我</div>
     <table width="350" border="0" cellpadding="0" cellspacing="0" id="ltable1">
  <tr>
    <td width="69">&nbsp;</td>
    <td width="180"><img src="images/12.png" width="171" height="164" /></td>
    <td width="101">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td align="center">云裳花开</td>
    <td>&nbsp;</td>
  </tr>
 </table>

     <div id="ldetail">91年人，喜欢动漫，散文，哲学小说，没事爱四处逛<br />
     邮箱：1525781887@qq.com</div>
     <div id="lrcomend">文章分类-----------------------------------</div>
     <div id="lrank">
       <ul>
       <li><a href="#">诗歌</a></li>
       <li><a href="#"> 随笔</a></li>
       <li> <a href="#">电影评论</a></li>
       <li> <a href="#">科技 </a></li>
       <li><a href="#">其它 </a></li>
     </ul></div>
     
     <div id="lrcomend">推荐文章-----------------------------------</div>
     
     <div id="lnews">
       <ul>
         <li><a href="new1">微信开放WiFi接口，醉翁之意在乎O2O还是大数据</a></li>
         <li><a href="#">Go语言诞生5周年！10大Go语言开源项目</a></li>
         <li><a href="#">神器 VisuAlgo：通过动画学习算法和数据结构</a></li>
         <li><a href="#">如何设计优雅的移动游戏</a></li>
         <li><a href="#">云计算华山论剑：云如何改变企业</a></li>
       </ul>
      </div>
   </div>
    
   
   
   
   <div id="right">
     <div id="rtitle">首页&gt;博文</div>
     
     <div id="news1title">用Cloudant在Bluemix上构建一个简单的文字游戏应用程序</div>
     
     <div id="rcon">
       <p class="STYLE1">&nbsp;&nbsp;&nbsp;&nbsp; Bluemix 是一种新开放平台，用于开发和部署 Web 和移动应用程序。本文将介绍如何使用 Bluemix 的和它基于云的开发环境：DevOps Services 创建一个简单的 GuesstheWord 游戏应用程序。您将从头开始创建，最后得到一个可在 Web 浏览器中运行的简单游戏，以及在云中运行的服务器代码。 </p>
       <p class="STYLE1">&nbsp;&nbsp;&nbsp;&nbsp;尽管此应用程序很简单，但我将介绍在开发更大型应用程序时至关重要的各个方面，比如设置一个良好的开发环境来启用本地调试。我的目的是使用一种适合开发大型 Bluemix 应用程序的方法，演示一个小型 Bluemix 应用程序的开发。完成本文中的步骤后，您将有能力自行开发任何规模的 Bluemix 应用程序。</p>
       <p><strong>实现该应用程序的前提条件 </strong></p>
       <p class="STYLE5">&nbsp;&nbsp;&nbsp;&nbsp;要学习本文，您需要一个 Bluemix 帐户和一个 DevOps Services 帐户。所以如果还没有这些帐户，请立即创建它们。另外，如果这是您第一次听到 Bluemix，您可能希望阅读这篇简短的 简介。        </p>
       <p class="STYLE5">&nbsp;&nbsp;&nbsp;&nbsp;启动一个开发项目时，选择正确的技术很重要。Bluemix 支持多种开发应用程序的技术。事实上，此灵活性是该平台的主要优势之一，因为它允许您选择哪些技术最适合您想要开发的应用程序。对于我们的 Guess-the-Word 游戏，我们将使用以下技术：</p>
       <p class="STYLE5"><span class="STYLE6">•Node.js</span>：对于服务器端代码，我们将使用 Node.js。使用 Node.js 实现的 Web 服务器能快速启动，很容易在本地开发和调试。为服务器端和客户端代码使用同一种语言（比如 JavaScript）也是一种优势。我们还会将 Express 框架与 Node.js 结合使用，因为它在实现 Web 服务器时提供了有用的功能。</p>
       <p class="STYLE5"><span class="STYLE6">•Cloudant</span>：为了持久保存服务器数据（游戏分数排行榜），我们将使用一个 Cloudant 数据库。像 Cloutant 这样的 NoSQL 数据库很容易用于存储 JavaScript 和 JSON 编码的数据。         </p>
       <p class="STYLE5"><span class="STYLE6">•HTM、CSS 和 JavaScript</span>：游戏的 UI 将使用 HTML、CSS 和 JavaScript 实现。考虑到现代 Web 浏览器支持 HTML5 和 CSS3，这是一种自然的选择，因为除了计算机之外，它会使得我们的游戏也能在电话和平板电脑上运行。         </p>
       <p class="STYLE5"><span class="STYLE6">•Bootstrap 和 JQuery</span>：我们还将使用 Bootstrap 和 JQuery JavaScript 框架，它们提供了不错的 Web UI 开发功能。         </p>
       <p class="STYLE5"><span class="STYLE6">•Jade</span>：为了节省一些录入工作，我们将对 HTML 页面使用一种模板语言。有多种模板语言可用于 Node.js。我决定使用 Jade，因为它常常用于 Express 框架。 </p>
     
     </div>
   
     <div id="comment"><span class="STYLE3">评论:<br />
     </span>
       <label>
       <textarea name="textarea" id="textarea" cols="50" rows="3"></textarea>
       </label>
       <br />
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <input name="" type="button" value="提交" />
       &nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="重置" />
     </div>
   </div>
   
   <div id="clear"></div>
   
   <div id="bottom">
     <div id="copyright">Copyright © 2014 SimpleBlog 华师大计算机科学与技术 版权所有</div>
   </div>
  </div>
</div>
</body>
</html>
